<template>
    <div class="search">
        <div class="searchTop">
            <van-icon name="arrow-left" size="0.5rem" @click="goBack()" />
            <van-search class="searchInput" v-model="searchValue" show-action placeholder="请输入搜索关键词" shape="round">
                <template #action>
                    <div @click="onClickButton">搜索</div>
                </template>
            </van-search>
        </div>
        <div class="history">
            <div class="historyTitle">
                <span>历史</span>
                <van-icon name="delete-o" @click="clearHistory" size="0.4rem" />
            </div>
            <div class="historyItem">
                <div v-for="item in historyList" :key="item">
                    <van-tag @click="putInput(item)" color="#c0c0c0" size="medium"
                        :style="{ margin: '0.1rem 0.1rem 0 0 ', border: '#fff', padding: '0.05rem 0.2rem' }" plain round
                        type="primary">{{ item
                        }}</van-tag>
                </div>
            </div>
        </div>
        <div class="hot">
            <div class="hotTitle">
                <span>推荐</span>
                <van-icon name="replay" @click="sortHotSearch()" size="0.4rem" />
            </div>
            <div class="hotItem">
                <div v-for="item in sortHotSearch()" :key="item.id">
                    <van-tag @click="putInput(item.first)" color="#c0c0c0" size="medium"
                        :style="{ margin: '0.1rem 0.1rem 0 0 ', border: '#fff', padding: '0.05rem 0.2rem' }" plain round
                        type="primary">{{
                                item.first
                        }}</van-tag>
                </div>
            </div>
        </div>
        <div class="hotList">
            <div class="hotListTop">
                <span :style="{ fontWeight: 900 }">热搜榜</span>
            </div>
            <van-divider />
            <div v-for="(item, i) in hotSearchLists" :key="item.id">
                <div class="listItem" @click="putInput(item.searchWord)">
                    <div class="itemNum" :class="[i < 3 ? 'redNum' : '']">{{ i + 1 }}</div>
                    <div class="itemWord" :class="[i < 3 ? 'strongWord' : '']">{{ item.searchWord }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang='ts' setup>
import { getHotSearch, getHotSearchList } from '@/request/api/home';
import router from '@/router';
import { onMounted, Ref, ref } from 'vue'
let searchValue = ref('')
let historyList: Ref<Array<string>> = ref([])
let hotSearchList = ref([])
let hotSearchLists = ref([])

onMounted(async () => {
    if (window.localStorage.getItem('searchHistory') !== null)
        historyList.value = JSON.parse(window.localStorage.getItem('searchHistory'))
    let res = await getHotSearch()
    if (res.data.code === 200) {
        hotSearchList.value = res.data.result.hots
    }
    let result = await getHotSearchList()
    if (result.data.code === 200) {
        hotSearchLists.value = result.data.data
    }
})
const sortHotSearch = () => {
    return hotSearchList.value.sort(() => 0.5 - Math.random()).slice(0, 3)
}
const onClickButton = async () => {
    if (!searchValue.value)
        return
    if (!historyList.value.includes(searchValue.value) && searchValue.value) {
        historyList.value.unshift(searchValue.value)
        window.localStorage.setItem('searchHistory', JSON.stringify(historyList.value))
    }
    router.push({ path: '/searchDetail', query: { keyWord: searchValue.value } })
    searchValue.value = ''
}
const putInput = (word: string) => {
    router.push({ path: '/searchDetail', query: { keyWord: word } })
}
const clearHistory = () => {
    window.localStorage.clear()
    historyList.value = []
}
const goBack = () => {
    history.back()
}
</script>
 
<style lang = "less" scoped>
.search {
    width: 100%;
    background-color: #F5F5F5;

    .searchTop {

        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #fff;

        .searchInput {
            width: 90%;
        }
    }

    .history {
        margin: 0.4rem;

        .historyTitle {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 700;
        }

        .historyItem {
            margin-top: 0.1rem;
            display: flex;
            flex-wrap: wrap;
        }
    }

    .hot {
        margin: 0.4rem;

        .hotTitle {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 700;
        }

        .hotItem {
            margin-top: 0.1rem;
            display: flex;
            flex-wrap: wrap;
        }
    }

    .hotList {
        background-color: #fff;
        border-radius: 0.2rem;
        margin: 0.4rem 0.4rem 0 0.4rem;
        padding: 0.2rem 0.4rem;

        .listItem {
            margin-top: 0.3rem;
            display: flex;
            align-items: center;

            .itemNum {
                min-width: 0.6rem;
                display: flex;
                justify-content: center;
                align-items: center;
                color: #999;
                font-size: 0.35rem;
            }

            .redNum {
                color: red;
                font-weight: 600;
            }

            .itemWord {
                margin-left: 0.2rem;
                line-height: 0.3rem;
            }

            .strongWord {
                font-weight: 600;
            }
        }
    }

}
</style>